<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="user-hd">
					<router-link to="/My" class="info"><i v-if="isRead"></i></router-link>
					<div class="qd" @click="CheckIn" v-text="text"></div>
					<div class="weui-cells">
						<div class="weui-cell">
							<div class="weui-cell__hd tx">
								<img src="../../assets/logo.png" alt="" v-if="!personal.imgUrl">
								<img :src="personal.imgUrl" alt="" v-if="personal.imgUrl">
								<div class="level">V
									<span v-text="personal.levelId"></span>
								</div>
							</div>
							<div class="weui-cell__bd">
								<div class="f18">
									<span v-text="personal.userName"></span>
									<span class="v" v-text="name"></span></div>
								<div class="f14">ID：
									<span v-text="personal.uuid"></span>
								</div>
								<div class="f13" v-text="personal.nickName == '' ? '这个人很懒，还没有编辑签名' : personal.nickName "></div>
							</div>
							<div class="weui-cell__ft">

							</div>
						</div>
					</div>
					<div class="weui-flex weui-fixed-btm">
						<router-link tag="div" class="weui-flex__item" to="/My">
							<div class="weui-fixed-btn">
								<div class="val">0</div>
								<div class="name">魔豆</div>
							</div>
						</router-link>
						<router-link tag="div" class="weui-flex__item" to="/My">
							<div class="weui-fixed-btn">
								<div class="val">0</div>
								<div class="name">魔币</div>
							</div>
						</router-link>
						<router-link tag="div" exact class="weui-flex__item" to="/My">
							<div class="weui-fixed-btn">
								<div class="val">0</div>
								<div class="name">魔分</div>
							</div>
						</router-link>
						<router-link tag="div" class="weui-flex__item" to="/My">
							<div class="weui-fixed-btn">
								<div class="val">0</div>
								<div class="name">业绩</div>
							</div>
						</router-link>
					</div>
				</div>
				<div class="developing" v-if="personal.levelId >= 3">
					<div class="title">开拓奖进度</div>
					<div class="weui-flex">
						<div class="weui-flex__item fx1">已分享{{list[0]}}{{list[2]}}</div>
						<div class="fx2"><i></i>还需要分享{{list[1]-list[0]}}{{list[2]}}</div>
					</div>
					<div class="progress">
						<van-progress color="#702aac" :percentage="isList" />
					</div>
				</div>
				<div class="list">
					<div class="title vux-1px-b">我的服务</div>
					<grid :show-lr-borders="false" :show-vertical-dividers="false">
						<grid-item link="/My">
							<img src="../../assets/images/img1.png" alt="">
							<p>我的订单</p>
						</grid-item>
						<grid-item link="/My">
							<img src="../../assets/images/img2.png" alt="">
							<p>银行卡</p>
						</grid-item>
						<grid-item link="/My">
							<img src="../../assets/images/img3.png" alt="">
							<p>创业基金</p>
						</grid-item>
						<grid-item link="/My">
							<img src="../../assets/images/img4.png" alt="">
							<p>收货地址</p>
						</grid-item>
					</grid>
					<grid :show-lr-borders="false" :show-vertical-dividers="false">
						<grid-item link="/My">
							<img src="../../assets/images/img5.png" alt="">
							<p>通讯录</p>
						</grid-item>
						<grid-item link="/My">
							<img src="../../assets/images/img6.png" alt="">
							<p>魔吻规则</p>
						</grid-item>
						<grid-item link="/Invite">
							<img src="../../assets/images/img7.png" alt="">
							<p>分享注册</p>
						</grid-item>
						<grid-item link="/Setting">
							<img src="../../assets/images/img8.png" alt="">
							<p>设置</p>
						</grid-item>
					</grid>
				</div>
				<div class="list">
					<div class="title vux-1px-b">我的福利</div>
					<grid :show-lr-borders="false" :show-vertical-dividers="false" v-if="show">
						<grid-item link="/My" v-if="month">
							<img src="../../assets/images/img9.png" alt="">
							<p>每月领取</p>
						</grid-item>
						<grid-item link="/My" v-if="team">
							<img src="../../assets/images/img10.png" alt="">
							<p>我的团队</p>
						</grid-item>
						<grid-item link="/My">
							<img src="../../assets/images/img11.png" alt="">
							<p>首次体验券</p>
						</grid-item>
						<grid-item link="">
						</grid-item>
					</grid>
					<div class="prompt" v-if="!show">
						<p>您还没有任何福利，快去购买商品获取福利哦~</p>
						<router-link tag="div" to="/My" class="btn">立即获取</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { mine } from './../../utils/api';
	let _this;
	export default {
		data() {
			return {
				list: [], // 开拓奖
				isList: 0,
				personal: [],
				name: '', // 1普通用户  2魔粉  3达人 4创客 5联创
				text: '', // 签到
				isRead: false,
				show: false,
				month: false,
				team: false,
				first: false
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			//页面刚进入时开启长连接
			this.initWebSocket();
		},
		mounted() {
			this.$vux.loading.show({
				text: '加载中...'
			})
			this.getUser();
			this.getRead();
			this.getFl();
			this.getQd();
		},
		methods: {
			getUser() { // 个人信息
				mine.getPersonal().then(res => {
					if(res.code == 200) {
						this.personal = res.data;
						switch(res.data.levelId) {
							case 1:
								this.name = '普通用户';
								break;
							case 2:
								this.name = '魔粉';
								break;
							case 3:
								this.name = '达人';
								break;
							case 4:
								this.name = '创客';
								break;
							case 5:
								this.name = '联创';
								break;
						}
					}
				})
			},
			getRead() { // 是否有最新消息
				mine.getIsRead().then(res => {
					if(res.code == 200) {
						this.isRead = res.data;
					}
				})
			},
			getFl() { // 我的福利
				mine.getWelfare().then(res => {
					if(res.code == 200) {
						if(res.data.first == false && res.data.month == false && res.data.team == false) {
							this.show = false;
						} else {
							this.show = true;
						}
						this.month = res.data.month;
						this.team = res.data.team;
						this.first = res.data.first;
					}
				})
			},
			getQd() { // 签到状态
				mine.getSecond().then(res => {
					this.text = res.msg;
				})
			},
			CheckIn() { // 签到
				mine.getSign().then(res => {
					if(res.code == 200) {
						this.text = '已签到';
					} else if(res.code == 500) {
						this.text = '已签到';
					}
					Toast(res.msg);
				})
			},
			initWebSocket() { // 初始化 weosocket
				mine.getUserId().then(res => {
					if(res.code == 200) {
						const wsuri = 'wss://app.moven.vip/mc-bar?uid=' + res.data; // ws 地址
						this.websock = new WebSocket(wsuri);
						this.websock.onopen = this.websocketonopen;
						this.websock.onerror = this.websocketonerror;
						this.websock.onmessage = this.websocketonmessage;
						this.websock.onclose = this.websocketclose;
					}
				})
			},
			websocketonopen() {
				console.log("WebSocket连接成功");
			},
			websocketonerror(e) { // 错误
				console.log("WebSocket连接发生错误");
			},
			websocketonmessage(e) { // 数据接收 
				this.list = e.data.split("@F@");
				this.isList = Number(100 * this.list[0] / this.list[1]);
			},
			websocketsend(agentData) { // 数据发送
				this.websock.send(agentData);
			},
			websocketclose(e) { // 关闭
				this.websock.close();
			}
		}
	}
</script>

<style lang="less" scoped>
	[v-cloak] {
		display: none!important;
	}
	
	.f18 {
		font-size: 18px;
		font-weight: bold;
	}
	
	.f14 {
		font-size: 14px;
	}
	
	.f13 {
		font-size: 13px;
	}
	
	.v {
		background: #feb542;
		color: #fff;
		border-radius: 4px;
		padding: 2px 5px;
		font-size: 13px;
	}
	
	.user-hd {
		background: linear-gradient(left, #7e1cbf, #9d0ad5);
		color: #fff;
		position: relative;
		min-height: 170px;
		margin-bottom: 50px;
		.info {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 24px;
			height: 24px;
			background: url(../../assets/images/g6.png) no-repeat center;
			background-size: 24px;
			z-index: 999;
			i {
				width: 10px;
				height: 10px;
				background: #fff;
				border-radius: 50%;
				display: block;
				position: relative;
				left: 18px;
				top: -3px;
			}
		}
		.qd {
			background: #fff;
			position: absolute;
			right: 0;
			top: 37%;
			color: #6f2aab;
			padding: 2px 15px;
			border-radius: 15px 0 0 15px;
			z-index: 99;
			font-size: 12px;
		}
		.tx {
			position: relative;
			margin-right: 15px;
			img {
				width: 66px;
				height: 66px;
				border: 2px solid #fff;
				border-radius: 50%;
				background: #fff;
			}
			.level {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 20px;
				height: 20px;
				line-height: 20px;
				background: #feb542;
				color: #fff;
				border-radius: 50%;
				border: 1px solid #fff;
				font-size: 12px;
				text-align: center;
			}
		}
		.weui-cells {
			background: none;
			padding: 20px 0 10px;
			.weui-cell__bd {
				padding-right: 50px;
			}
		}
		.weui-flex {
			margin: 15px;
			position: absolute;
			bottom: -55px;
			background: #fff;
			color: #000;
			padding: 15px 0;
			width: calc(100% - 8px);
			border-radius: 10px;
			.val {
				font-size: 20px;
			}
		}
	}
	
	.weui-cell:before {
		border-top: 0;
	}
	
	.weui-fixed-btm .weui-flex__item {
		text-align: center;
	}
	
	.weui-grid {
		text-align: center;
		img {
			width: 30px;
		}
		p {
			font-size: 14px;
			padding-top: 10px;
		}
	}
	
	.list {
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		overflow: hidden;
		.title {
			margin: 0 15px;
			padding: 15px 0;
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	}
	
	/deep/ .weui-cells:after {
		border-bottom: 0;
	}
	
	/deep/ .weui-grid:after {
		border-bottom: 0;
	}
	
	/deep/ .weui-grids:before {
		border-top: 0;
	}
	
	/deep/ .vux-1px-b:after {
		border-bottom: 1px solid #f5f5f5;
	}
	
	.prompt {
		text-align: center;
		color: #999;
		padding: 30px 0;
		.btn {
			background: #702aac;
			display: inline-block;
			color: #fff;
			padding: 5px 20px;
			border-radius: 20px;
			margin-top: 20px;
		}
	}
	
	.developing {
		margin: 10px;
		background: #fff;
		padding: 15px;
		border-radius: 10px;
		.title {
			font-size: 12px;
		}
		.fx1 {
			font-size: 16px;
			color: #702aac;
		}
		.fx2 {
			font-size: 13px;
			color: #999;
			padding-top: 4px;
			i {
				display: inline-block;
				width: 14px;
				height: 14px;
				background: url(../../assets/images/user.png) no-repeat;
				background-size: 14px;
				margin-right: 2px;
			}
		}
		.progress {
			margin-top: 20px;
			padding: 10px 0;
		}
		/deep/ .van-progress {
			height: 6px;
		}
	}
</style>